<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css.scss"> -->
    <link rel="stylesheet" href="./css.min.css">
</head>

<body>
    <div class="box">
        <div class="top">
            <div class="toptop">
                <div class="topbianqian">
                    警情警力
                </div>
                <div class="topbianqian">
                    实有人口
                </div>
                <div class="topbianqian">
                    流动人口
                </div>
                <div class="topbianqian">
                    实名制
                </div>
            </div>
            <div class="topbianti">
                <h1>舆情分析</h1>
            </div>
            <div class="toptop">
                <div class="topbianqian">
                    舆情
                </div>
                <div class="topbianqian">
                    交通
                </div>
                <div class="topbianqian">
                    分析报告
                </div>
                <div class="topbianqian">
                    返回
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <div class="lefttop">
                    <div class="topp">舆情来源分析</div>
                    <div class="topcenter">
                        <p> 地区：甘孜</p>
                        <p>2018-06-14</p>
                    </div>
                    <div class="topbottom">
                        <div class="topbotleft">
                            <div class="yuan1">无效报</div>
                            <div class="yuan2">无效报警</div>
                            <div class="yuan3">无</div>
                        </div>
                        <div class="topbotright"></div>
                    </div>
                </div>
                <div class="leftcenter">
                    <div class="lefcentop">
                        舆情区域分析
                    </div>
                    <div class="lefcencenter">
                        <p>状态：已调节</p>
                        <p>时间段：2018-06-10至2018-06-14</p>
                    </div>
                    <div class="lefcenbottom">
                        <div class="lefcenboleft"></div>
                        <div class="lefcenboright"></div>
                    </div>
                </div>
                <div class="leftbottom">
                    <div class="leftbotop">
                        舆情区域分析
                    </div>
                    <div class="leftbocen">
                        <p>状态：已调节</p>
                        <p>时间段：2018-06-10至2018-06-14</p>
                    </div>
                    <div class="leftbobot">
                        <div class="leftbobotleft">

                        </div>
                        <div class="leftbobotright">
                            <p class="fontdiv">
                                今日舆情总数
                            </p>
                            <p class="fontsize">
                                54
                            </p>
                            <p class="huandiv">
                                环比2%
                            </p>
                            <p class="fontdiv">
                                今日舆情总数
                            </p>
                            <p class="fontsize">
                                54
                            </p>
                            <p class="huandiv">
                                环比2%
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center">
                <div class="centop">
                    <div class="centopleft">
                        <div class="centoplefttop">
                            今日舆情
                        </div>
                        <div class="centopleftbot">
                            <p>状态：已调节</p>
                            <p>时间段：2018-06-10</p>
                        </div>
                        <!-- 111111111 -->
                        <div class="centopleftcen">
                            <div class="centopleftcenbox">
                                <p class="hanzi">
                                    今日舆情总数
                                </p>
                                <p class="shuzi">
                                    54
                                </p>
                                <p class="huanbi">
                                    环比2%
                                </p>
                            </div>
                            <div class="centopleftcenbox">
                                <p class="hanzi">
                                    本周舆情总数
                                </p>
                                <p class="shuzi">
                                    54
                                </p>
                                <p class="huanbi">
                                    环比3%
                                </p>
                            </div>
                            <div class="centopleftcenbox">
                                <p class="hanzi">
                                    本月舆情总数
                                </p>
                                <p class="shuzi">
                                    54
                                </p>
                                <p class="huanbi">
                                    环比3%
                                </p>
                            </div>
                            <div class="centopleftcenbox">
                                <p class="hanzi">
                                    今日舆情总数
                                </p>
                                <p class="shuzi">
                                    54
                                </p>
                                <p class="huanbi">
                                    环比2%
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="centopright">
                        <div class="centoprighttop">
                            热门信息
                        </div>
                        <div class="centoprightbot">
                            <p>状态：已调节</p>
                            <p>时间段：2018-06-10</p>
                        </div>
                        <div class="xinwen1">
                            <p>啊书法大赛敢死队风格方法是大使馆的法国手动阀手动阀</p>
                            <p>撒大噶梵蒂冈发生的v</p>
                        </div>
                        <div class="xinwen2">
                            <p>啊书法大赛敢死队风格方法是大使馆的法国手动阀手动阀</p>
                            <p>撒大噶梵蒂冈发生的v</p>
                        </div>
                        <div class="xinwen1">
                            <p>啊书法大赛敢死队风格方法是大使馆的法国手动阀手动阀</p>
                            <p>撒大噶梵蒂冈发生的v</p>
                        </div>
                        <div class="xinwen2">
                            <p>啊书法大赛敢死队风格方法是大使馆的法国手动阀手动阀</p>
                            <p>撒大噶梵蒂冈发生的v</p>
                        </div>
                        <div class="xinwen1">
                            <p>啊书法大赛敢死队风格方法是大使馆的法国手动阀手动阀</p>
                            <p>撒大噶梵蒂冈发生的v</p>
                        </div>
                        <div class="xinwen2">
                            <p>啊书法大赛敢死队风格方法是大使馆的法国手动阀手动阀</p>
                            <p>撒大噶梵蒂冈发生的v</p>
                        </div>
                    </div>
                </div>
                <!-- 现在写 -->
                <div class="cenbottom">
                    <div class="cenbottomtop">
                        舆情局比分析
                    </div>
                    <div class="cenbottomcen">
                        <p>状态：已调节</p>
                        <p>时间段：2018-06-10</p>
                    </div>
                    <div class="cenbottombot">
                        <div class="cenbottombotlef">

                        </div>
                        <div class="cenbottombotrig">
                            <div class="hanzi">
                                今年舆情总数
                            </div>
                            <div class="shuzi">
                                54
                            </div>
                            <div class="huanbi">
                                环比2%
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="righttop">
                    <div class="leftbotop">
                        舆情类别分析
                    </div>
                    <div class="leftbocen">
                        <p>状态：已调节</p>
                        <p>时间段：2018-06-10</p>
                    </div>
                    <div class="righttopbot">

                    </div>
                </div>
                <div class="rightcenter">
                    <div class="leftbotop">
                        舆情类别分析
                    </div>
                    <div class="leftbocen">
                        <p>状态：已调节</p>
                        <p>时间段：2018-06-10</p>
                    </div>
                    <div class="rightcenterbot">

                    </div>
                </div>
                <div class="rightbottom">
                    <div class="leftbotop">
                        舆情类别分析
                    </div>
                    <div class="leftbocen">
                        <p>状态：已调节</p>
                        <p>时间段：2018-06-10</p>
                    </div>
                    <div class="rightbottombot">

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../echarts.min.js"></script>
<script>
    // y轴柱状图
    let topbotright = document.querySelector(".topbotright")
    let myecharts1 = echarts.init(topbotright)
    let lefcenboright = document.querySelector(".lefcenboright")
    let myecharts3 = echarts.init(lefcenboright)
    let option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: ['微博', '网站', '新闻', '贴吧', '论坛']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: ['20', '26', '30', '80', '100'],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        { offset: 0, color: 'orange' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },

            },

        ]
    }
    myecharts3.setOption(option1)
    myecharts1.setOption(option1)
    // 原型图
    const data = [
        [2000, 10000, 6785.71],
        [4000, 10000, 6825],
        [3000, 6500, 4463.33],
        [2500, 5600, 3793.83],
        [2000, 4000, 3060],
    ];
    const cities = ['甘孜县', '炉霍县', '白玉县', '雅江县', '康定县']
    const barHeight = 50;
    let lefcenboleft = document.querySelector(".lefcenboleft")
    let myecharts2 = echarts.init(lefcenboleft)

    let option2 = {
        angleAxis: {
            type: 'category',
            data: cities
        },

        radiusAxis: {},
        polar: {},
        series: [
            {
                type: 'bar',
                itemStyle: {
                    color: 'transparent'
                },
                data: data.map(function (d) {
                    return d[0];
                }),
                coordinateSystem: 'polar',
                stack: 'Min Max',
                silent: true
            },
            {
                type: 'bar',
                data: data.map(function (d) {
                    return d[1] - d[0];
                }),
                coordinateSystem: 'polar',
                name: 'Range',
                stack: 'Min Max'
            },

            {
                type: 'bar',
                data: data.map(function (d) {
                    return barHeight * 2;
                }),
                coordinateSystem: 'polar',
                name: 'Average',
                stack: 'Average',
                barGap: '-100%',
                z: 10
            }
        ]
    }

    myecharts2.setOption(option2)

    // 点状图
    let leftbobotleft = document.querySelector(".leftbobotleft")
    let myecharts4 = echarts.init(leftbobotleft)

    let option3 = {
        xAxis: {},
        yAxis: {},
        grid: {
            height: 130
        },
        series: [
            {
                legend: {},
                data: [
                    [1000.0, 8.04],
                    [800.07, 60.95],
                    [1300.0, 70.58],
                    [900.05, 8.81],
                    [1100.0, 8.33],
                    [1400.0, 70.66],
                    [1003.4, 60.81],
                    [1000.0, 6.33],
                    [1004.0, 8.96],
                    [1002.5, 6.82],
                    [900.15, 7.2],
                    [1001.5, 7.2],
                    [300.03, 40.23],
                    [1002.2, 7.83],
                    [200.02, 4.47],
                    [100.05, 30.33],
                    [400.05, 40.96],
                    [600.03, 7.24],
                    [1002.0, 6.26],
                    [1002.0, 8.84],
                    [700.08, 50.82],
                    [500.02, 5.68]
                ],
                type: 'scatter'
            }
        ]
    }

    myecharts4.setOption(option3)

    // 折现加柱状
    let cenbottombotlef = document.querySelector(".cenbottombotlef")
    let myecharts5 = echarts.init(cenbottombotlef)

    let option4 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            height: 120
        },
        legend: {
            data: ['2017', '2018', '同比增速'],
            textStyle: {
                color: "white"
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',

                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} ml'
                }
            },
            {
                type: 'value',

                min: 0,
                max: 25,
                interval: 5,
                axisLabel: {
                    formatter: '{value} °C'
                }
            }
        ],
        series: [
            {
                name: '2017',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                ],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                        { offset: 0.5, color: 'orange' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
            },
            {
                name: '2018',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' ml';
                    }
                },
                data: [
                    2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                ],
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                        { offset: 0.5, color: 'red' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
            },
            {
                name: '同比增速',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value + ' °C';
                    }
                },
                data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            }
        ]
    }

    myecharts5.setOption(option4)

    // 右1
    let righttopbot = document.querySelector(".righttopbot")
    let myecharts6 = echarts.init(righttopbot)

    let option5 = {
        series: [
            {

                type: 'pie',
                radius: [10, 90],
                center: ['50%', '50%'],
                roseType: 'area',
                // itemStyle: {
                //     borderRadius: 8
                // },
                data: [
                    { value: 40, name: '涉恐' },
                    { value: 10, name: '涉疆' },
                    { value: 20, name: '涉蒙' },
                    { value: 30, name: '涉警' },
                    { value: 10, name: '涉稳' },
                    { value: 26, name: '涉军' },
                    { value: 22, name: '涉藏' },

                ],
                label: {
                    color: "white"
                }
            }
        ]
    }

    myecharts6.setOption(option5)

    // 右2
    let rightcenterbot = document.querySelector(".rightcenterbot")
    let myecharts7 = echarts.init(rightcenterbot)

    let option6 = {
        xAxis: {
            data: ['6-08', '6-09', '6-10', '6-11', '6-12', '6-13', '6-14',],
            boundaryGap: false,
        },
        yAxis: {},
        grid: { height: 130 },
        series: [
            {
                type: "line",
                data: ['120', '130', '100', '130', '95', '280', '210'],
                areaStyle: {}
            }
        ]
    }

    myecharts7.setOption(option6)

    let rightbottombot = document.querySelector(".rightbottombot")
    let myecharts8 = echarts.init(rightbottombot)

    let option7 = {
        series: [
            {
                type: "pie",
                radius: ' 50%',
                data: [
                    { value: 55, name: "境外" },
                    { value: 45, name: "境内" }
                ],
                label: {
                    color: "white"
                }
            }
        ],
        legend: {
            textStyle: {
                color: "white"
            }
        }
    }

    myecharts8.setOption(option7)
</script>